<template>
  <!-- 柱状图和折线图配合使用 -->
  <div>
    {{imgs}}
    <br />保存的图:
    <hr />
    <img v-for="item in imgs" :src="item.img" style="width:150px;height:150px" />
    <hr />
    <div>
      <el-button plain type="primary" size="mini" @click="exportWord">导出</el-button>
      <el-button plain type="primary" size="mini" @click="save">保存</el-button>
      <el-button plain type="primary" size="mini" @click="imgs=[]">清空</el-button>
    </div>

    <div ref="echart" style="width: 1200px; height: 600px; margin: 30px auto" id="chart"></div>
  </div>
</template>

<script>
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";
import Docxtemplater from "docxtemplater";
import JSZip from "jszip";

export default {
  data() {
    return {
      img: "",
      imgs: []
    };
  },
  mounted() {
    this.chart();
  },
  methods: {
    // 条形统计图
    chart() {
      //初始化
      var myCharts = this.$echarts.init(document.getElementById("chart"));
      // 配置项
      var option = {
        //网格：x轴和y轴是基于网格显示，没有这个对象时，不显示网格
        // grid: {
        //   show: true,
        //   borderWidth: 10,
        //   borderColor: "red",
        //   left: 120,
        //   top: 120,
        //   // width : 300,
        //   // height : 150
        // },
        grid: {
          top: "15%",
          right: "3%",
          left: "10%",
          bottom: "20%"
        },
        //标题配置
        title: {
          text: "客户投诉PPM趋势图", //标题，加‘\n’可换行
          textStyle: {
            //文本样式
            fontWeight: "800"
          },
          left: "center"
        },
        // 图例
        legend: {
          left: "center",
          top: "25"
        },
        // x轴
        xAxis: {
          type: "category", //类目轴
          data: [
            "FY20",
            "FY21 YTD",
            "21-Jan",
            "21-Feb",
            "21-Mar",
            "21-Apr",
            "21-May",
            "21-Jun",
            "21-Jul",
            "21-Aug",
            "21-Sep",
            "21-Oct",
            "21-Nov",
            "21-Dec"
          ],
          position: "bottom" //x轴位置：top或bottom（默认）
        },
        // y轴
        yAxis: {
          type: "value", //数值轴，对应series中的data
          position: "left" //y轴位置，left (默认)或right
        },
        //数据筛选，需要配合series使用，data中的每一项对应name值
        series: [
          {
            name: "客户投诉PPM",
            type: "bar", //类型：bar：柱状图，line：折线图，pie：饼装图
            data: [
              370,
              217,
              200,
              241,
              100,
              262,
              292,
              690,
              230,
              295,
              230,
              356,
              256,
              170
            ],
            color: "rgb(0,176,80)",
            //显示数值
            label: {
              show: true, //设置显示
              formatter: function(arg) {
                //通过回调函数动态显示文字内容,percent:所占百分比
                return arg.value;
              },
              position: "top"
            },
            //平均值
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            },
            barWidth: "30%", //宽度
            //柱状图样式配置
            itemStyle: {
              normal: {
                color: function(e) {
                  if (e.dataIndex == 7 || e.dataIndex == 11) {
                    return "rgb(247,150,70)";
                  }
                }
              }
            }
          },
          {
            name: "Target",
            type: "line",
            data: [
              500,
              330,
              330,
              330,
              330,
              330,
              330,
              330,
              330,
              330,
              330,
              330,
              330,
              330
            ],
            color: "rgb(192,80,77)",
            symbol: "none"
          }
        ],
        // 提示
        tooltip: {
          trigger: "item",
          showContent: true,
          //   trigger: "item", //触发类型：放在图上
          //   trigger: "axis", //触发类型：放在坐标轴上
          //   triggerOn: "mouseover", //触发方式：click：点击，mouseover：鼠标移入(默认)
          formatter: function(arg) {
            //提示文字也可以是个回调函数
            // return arg[0].name + ":" + arg[0].data;
            return arg.name + ":" + arg.value;
          }
        }
        //右上角工具栏按钮
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}, //导出为图片
        //     dataView: {}, //数据视图，生成一个列表，可以编辑数据
        //     restore: {}, //重置数据，刷新
        //     dataZoom: {}, //区域缩放
        //     magicType: {
        //       //动态图表切换
        //       type: ["bar", "line"],
        //     },
        //   },
        // },
      };
      myCharts.setOption(option);
    },

    // 导出echarts图片，格式转换
    base64DataURLToArrayBuffer(dataURL) {
      const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
      if (!base64Regex.test(dataURL)) {
        return false;
      }
      const stringBase64 = dataURL.replace(base64Regex, "");
      let binaryString;
      if (typeof window !== "undefined") {
        binaryString = window.atob(stringBase64);
      } else {
        binaryString = new Buffer(stringBase64, "base64").toString("binary");
      }
      const len = binaryString.length;
      const bytes = new Uint8Array(len);
      for (let i = 0; i < len; i++) {
        const ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
      }
      return bytes.buffer;
    },
    save() {
      var myCharts = this.$echarts.init(document.getElementById("chart"));
      this.imgs.push({ img: myCharts.getDataURL() });
    },

    // 导出文档
    async exportWord() {
      let ImageModule = require("docxtemplater-image-module-free");
      // 点击导出word
      let _this = this;
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent("/template.docx", function(error, content) {
        // exportTemplate.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        // if (error) {
        //   throw error;
        // }
        // 图片处理
        let opts = {};
        opts.centered = true; // 图片居中，在word模板中定义方式为{%%image}
        opts.fileType = "docx";
        opts.getImage = function(chartId) {
          return _this.base64DataURLToArrayBuffer(chartId);
        };
        opts.getSize = function() {
          return [600, 400];
        };
        let imageModule = new ImageModule(opts);
        // 创建一个PizZip实例，内容为模板的内容
        let zip = new PizZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new Docxtemplater();
        doc.attachModule(imageModule);
        doc.loadZip(zip);
        var myCharts = _this.$echarts.init(document.getElementById("chart"));
        // 设置模板变量的值
        doc.setData({
          img: myCharts.getDataURL(), // 获取echarts图片
          table: [
            { name: "张水牛", age: 0.5 },
            { name: "奥特曼", age: 100 }
          ],
          imgs: _this.imgs
        });

        try {
          // 用模板变量的值替换所有模板变量
          doc.render();
        } catch (error) {
          // 抛出异常
          // let e = {
          //   message: error.message,
          //   name: error.name,
          //   stack: error.stack,
          //   properties: error.properties
          // };
          throw error;
        }
        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        });
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, "echarts图片导出.docx");
      });
    }
  }
};
</script>

<style>
</style>